<template>
<view>
<scroll-view class="bookScroll" scroll-y>
     <view class="bookBody">
          <view class="bookMsg">
               <view>{{hotelName}}</view>
               <view style="margin-top:10rpx;">地址：{{hotelAddress}}</view>
							 <view style="margin-top:10rpx;">电话：{{hotelPhone}}</view>
          </view>

          <block data-type="template" data-is="settingItem" data-attr="caption:'入住/离店',value:startDate+'/'+endDate,needIcon:false,isInput:false">
     <view class="settingItem">
          <text class="caption">入住/离店</text>
          <text class="value">{{startDate+'/'+endDate}}</text>
     </view>
</block>
          <block data-type="template" data-is="settingItem" data-attr="caption:'房间数量 ',value:'1间 ',needIcon:true,isInput:false">
     <view class="settingItem">
          <text class="caption">房间数量</text>
          <text class="value">1间</text>
     </view>
</block>
          <view style="width:100%;height:24rpx;"></view>
          <block data-type="template" data-is="settingItem" data-attr="caption:'入住人 ',value:'1间 ',needIcon:false,isInput:true,hint:'请输入姓名',inputType:'text'">
     <view class="settingItem">
          <text class="caption">入住人</text>
          <uni-easyinput v-model="menberFrom.name" placeholder="请输入姓名"></uni-easyinput>
     </view>
</block>
          <block data-type="template" data-is="settingItem" data-attr="caption:'手机号码 ',value:'1间 ',needIcon:false,isInput:true,hint:'请输入手机号码',inputType:'number'">
     <view class="settingItem">
          <text class="caption">手机号码</text>
          <uni-easyinput v-model="menberFrom.phone" placeholder="请输入手机号码" maxlength="11"></uni-easyinput>
     </view>
</block>
          <block data-type="template" data-is="settingItem" data-attr="caption:'到店时间',value:'19:00',needIcon:false,isInput:false">
     <view class="settingItem">
			 <text class="caption">到店时间</text>
			 	<uni-datetime-picker type="time"  return-type="string" :value="menberFrom.arriveTime" @change="dateChange"/>
     </view>
</block>
          <view style="width:100%;height:24rpx;"></view>

          <!-- <view class="settingItem">
               <text class="caption">选择优惠</text>
               <text class="discount">{{discount}}</text>
               <image src="/static/res/images/ic_down_arrow.png" mode="widthFix" class="icon"></image>
          </view> -->
          <!-- <view class="settingItem">
               <text class="caption">发票</text>
               <switch class="invoice" color="#ee6715"  checked></switch>
          </view> -->

          <view class="settingItem">
               <text class="caption">备注</text>
               <input class="remark" v-model="menberFrom.remark" placeholder="请补充你的其他需求"></input>
          </view>
          <view style="width:100%;height:100rpx;"></view>
     </view>
</scroll-view>

<view :class=" show ? '' : 'payItem'">
     <view class="priceItem">
          <text>应付：</text>
          <text>¥{{roomPrice}}</text>
          <text v-if="isDiscount" class="payMsg">(已优惠{{discount}}元)</text>
     </view>
     <view class="payBtn" @click="open">立即预约</view>
</view>
<passkeyborad :show="show" :money="roomPrice" @change="bookHotel"></passkeyborad>
</view>
</template>

<script>
// pages/bookHotel/bookHotel.js

var app = getApp();
import clearInput from "../../components/clearInput/clearInput";
import passkeyborad from "@/components/paykeyboard/yzc-paykeyboard.vue"
import uniDatetimePicker from '@/components/uni-datetime-picker/uni-datetime-picker.vue'
export default {
  data() {
    return {
			nowTime : new Date().getTime(),
			show: false,
      isDiscount: false,
			hotelAddress:'',
			hotelPhone:'',
			hotelId:'',
      roomPrice:0,
      hotelName:'',
      startDate:'',
      endDate:'',
			dayCount:'',
      discount: '不选择优惠',
			menberFrom:{
				name:'',
				phone:'',
				arriveTime:'',
				remark:''
			},
			dateString: '',
			type: 'time',
    };
  },

  components: {
    clearInput,
		passkeyborad,
		uniDatetimePicker
  },
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options);
		this.hotelId = options.id
		this.dayCount = options.dayCount;
    this.roomPrice = options.price * options.dayCount;
		this.hotelAddress = options.hotelAddress;
		this.hotelPhone = options.hotelPhone
    this.hotelName = options.hotelName;
    this.startDate = options.startDate;
    this.endDate = options.endDate;
		this.openid  = app.globalData.userInfo.openid
    // this.setData({
    //   roomPrice: roomPrice,
    //   hotelName: hotelName,
    //   startDate: startDate,
    //   endDate: endDate
    // });
  },
  
  methods: {
		open(){
			const { name, phone, arriveTime } = this.menberFrom
			if(name !='' && phone !='' && arriveTime !='' ){
				this.show = true
			}else{
				uni.showToast({
				    title: '请将信息填完',
						icon: 'none',
				    duration: 2000
				});
			}
		},
		bookHotel(){
			this.show = false
			try {
				console.log('预订民宿')
				uniCloud.callFunction({
					name: 'bookHotel',
					data: {openid: this.openid,hotelName:this.hotelName,hotelId:this.hotelId,startDate:this.startDate,endDate:this.endDate,menberFrom:this.menberFrom,price:this.roomPrice,dayCount:this.dayCount},
					success: (res) => {
						console.log(res.result)
						if(res.result.code === 0){
							uni.showToast({
									title: res.result.msg,
									duration: 2000
							});
							setTimeout(()=>{
								uni.switchTab({
										url: '/pages/minePage/minePage'
								});
							},2000)
							
						}
					},
					complete: () => {
						this.loadenable = false
					}
				})
			} catch (e) {
				console.log(e)
				uni.showToast({
						title: '系统出错，请稍后重新',
						icon: 'none',
						duration: 2000
				});
			}
		},
		dateChange(v){
			console.log(v)
			this.menberFrom.arriveTime = v
		}
	}
};
</script>
<style>
/* pages/bookHotel/bookHotel.wxss */

Page {
     width: 100%;
     height: 100%;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
     position: relative;
     font-size: 30rpx;
     background: #f2f2f2;
}

.bookScroll {
     width: 100%;
     height: max-content;
     flex: 1;
     white-space: nowrap;
}

.bookBody {
     width: 100%;
     overflow: scroll;
     padding-bottom: 100rpx;
     /* position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 100rpx; */
}

.bookBody .bookMsg {
     margin: 24rpx;
     display: flex;
     flex-direction: column;
     padding: 36rpx;
     border-radius: 10rpx;
     box-shadow: 0rpx 6rpx 20rpx #ccc;
     background: white;
}

.payItem {
     width: 100%;
     height: 100rpx;
     display: flex;
     flex-direction: row;
     align-items: center;
     background: white;
     border-top: 1rpx solid #ee6715;
     font-size: 32rpx;
     z-index: 10;
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
}

.payItem .priceItem {
     flex: 1;
     color: #ee6715;
     padding-left: 24rpx;
}

.payItem .payBtn {
     display: flex;
     align-items: center;
     height: 100%;
     justify-content: center;
     color: white;
     font-weight: bold;
     width: 250rpx;
     background: #ee6715;
}

.settingItem {
     display: flex;
     width: 100%;
     box-sizing: border-box;
     flex-direction: row;
     background: white;
     border-bottom: #dedede solid 1px;
     padding: 26rpx;
     align-items: center;
}

.settingItem .caption, .settingItem .value {
     font-size: 30rpx;
     color: #333;
     align-items: center;
     display: flex;
}

.settingItem .caption {
     width: 220rpx;
}

.settingItem .value {
     flex: 1;
     text-align: left;
}

.settingItem .icon {
     width: 28rpx;
     margin-left: 10rpx;
}

.settingItem .discount, .settingItem .remark {
     flex: 1;
     text-align: right;
     display: inline-block;
     align-items: center;
}

.settingItem .discount {
     color: #ee6715;
}

.settingItem .invoice {
     color: #ee6715;
     position: absolute;
     right: 0;
}

</style>